<template>
	<view class="wrap">
		<view class="wrap-mine paddingBottom" :class="isAllowScroll ? (drawerIsShow ? 'drawer-animation' : 'drawer-animation-return') : ''">
			<scroll-view scroll-y class="scroll">
				<mineInfoVue
					:userInfo="userInfo"
					:list="workList"
					@onMenu="onMenu"
					@onRefresh="onGetUserInfo"
				/>
			</scroll-view>
			
			<tabBarVue
				:class="isAllowScroll ? (drawerIsShow ? 'drawer-animation' : 'drawer-animation-return') : ''"
			/>
			
			<view
				v-if="isShowPopup"
				class="mine-popup"
				:class="isAllowScroll ? (drawerIsShow ? 'drawer-animation' : 'drawer-animation-return') : ''"
				@click.stop="onCloseMenu"
			/>
		</view>
		
		<view class="wrap-menu" :class="isAllowScroll ? (drawerIsShow ? 'menu-animation' : 'menu-animation-return') : ''">
			<scroll-view scroll-y class="scroll">
				<menuInfoVue
					:userInfo="userInfo"
					@onRefresh="onGetUserInfo"
				/>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import mineInfoVue from "@/components/mine/mineInfo.vue";
	import menuInfoVue from "@/components/mine/menuInfo.vue";
	import tabBarVue from "@/components/tabBar/tabBar.vue";
	export default {
		components: {
			mineInfoVue,
			menuInfoVue,
			tabBarVue,
		},
		data() {
			return {
				isAllowScroll: false, //允许滑动
				drawerIsShow: false, //打开菜单
				
				isShowPopup: false, //显示黑屏
				userInfo: null, //用户信息
				workList: [], //作品列表
			}
		},
		onShow() {
			this.onGetUserInfo();
			this.onGetWorksList();
		},
		methods: {
			/**
			 * 点击菜单
			 */
			onMenu() {
				this.isShowPopup = true;
				this.drawerIsShow = true;
				this.isAllowScroll = true;
			},
			/**
			 * 关闭菜单
			 */
			onCloseMenu() {
				this.isShowPopup = false;
				this.drawerIsShow = false;
				this.isAllowScroll = false;
			},
			
			/**
			 * 获取用户信息
			 */
			onGetUserInfo() {
				var userInfo = this.$stoarge.getUserInfo();
				
				this.userInfo = userInfo;
			},
			/**
			 * 获取作品列表
			 */
			onGetWorksList() {
				var list = this.$stoarge.getWorksList();
				
				this.workList = list;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative;
		z-index: 1;
		
		.wrap-mine {
			--bottom-height: 110rpx;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			box-sizing: border-box;
			overflow: hidden;
			z-index: 2;
			
			.scroll {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		}
		
		
		.wrap-menu {
			position: absolute;
			top: 0;
			right: -80vw;
			width: 80vw;
			height: 100vh;
			z-index: 999;
			background-color: #F6F6F6;
			overflow: hidden;
			
			.scroll {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		}
		
		
		
			
	}
	
	
	
	
	.mine-popup {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.menu-animation {
	    animation: menuMove 0.3s ease-in-out alternate forwards;
	}
	@keyframes menuMove {
	    0% {
			right: -80vw;
	    } 
	    100% {
			right: 0;
	    }
	}
	
	.menu-animation-return {
	    animation: menuMoveReturn 0.3s ease-in-out alternate forwards;
	}
	@keyframes menuMoveReturn { 
	    0% {
			right: 0;
	    } 
	    100% {
			right: -80vw;
	    }
	}
	
	
	.drawer-animation {
	    animation: drawerMove 0.3s ease-in-out alternate forwards;
	}
	@keyframes drawerMove{
	    0% {
			left: 0;
	    }
	    100% {
			left: -80vw;
	    }
	}
		
	.drawer-animation-return{ 
	    animation: drawerMoveReturn 0.3s ease-in-out alternate forwards;
	}
	@keyframes drawerMoveReturn{
	    0% {
			left: -80vw;
	    }
	    100% {
			left: 0;
	    }
	}
</style>